
<template>
  <div class="table">
    <div class="container">
      <div class="handle-box" >
        <!--<el-button type="primary" size="mini" @click="delAll">批量删除</el-button>-->
        <!--<el-input v-model="select_word" size="mini" placeholder="查询管理员（id,用户名，昵称）" class="handle-input"></el-input>-->
        <!--<el-button type="primary" size="mini" @click="centerDialogVisible = true">添加管理员</el-button>-->
      </div>
    </div>

    <el-table class="el-table_p" size="mini" ref="multipleTable" border  :data="orderList">
      <!--<el-table-column type="selection" ></el-table-column>-->
      <el-table-column prop="userAccount" label="个人信息" align="">
        <template #default="scope">

          <div>
            学员姓名：{{ scope.row.userAccount}}
          </div>
          <div>
            学员电话：{{ scope.row.phone}}
          </div>
          <div>
            学员微信：{{ scope.row.phone}}
          </div>
          <div>
            学员QQ：{{ scope.row.qq}}
          </div>
        </template>
      </el-table-column>
      <el-table-column prop="name" label="课程信息" align="">
        <template #default="scope">
          <div>
            课程名称：{{ scope.row.name}}
          </div>
          <div>
            课程时长：{{ scope.row.term}}
          </div>
          <div>
            开课时间：{{ scope.row.startDate}}
          </div>
          <div>
            申请时间：{{ scope.row.createTime}}
          </div>
          <div>
            审核通过时间：{{ scope.row.createTime}}
          </div> 
          <!-- <div>
          是否监护人办理：{{ scope.row.parentOperate}}
        </div> -->
        </template>
      </el-table-column>
      <el-table-column prop="name" label="办理信息" align="">
        <template #default="scope">
          <div>
            申请分期金额：{{ scope.row.amount}}
          </div>
          <div>
            分期手续费：{{ scope.row.serviceFee}}
          </div>
          <div>
            支付方式：{{ scope.row.createTime}}
          </div>
          <!--<div>-->
            <!--一次支付折扣：￥{{ scope.row.maxCoupon}}-->
          <!--</div>-->

        </template>
      </el-table-column>
      <el-table-column prop="status" label="状态" align="center" >
        <template slot-scope="scope">
          <template v-if="scope.row.status==0">
            <el-button size="mini" type="primary">待审核</el-button>
          </template>
          <template v-if="scope.row.status==1">
            <el-button size="mini" type="primary">审核通过</el-button>
          </template>
          <template v-if="scope.row.status==2">
            <el-button size="mini" type="primary">已关闭</el-button>
          </template>
          <!--订单状态：0:待审核,1:审核通过,2:已关闭-->
        </template>
      </el-table-column>
      <el-table-column prop="updateBy" label="修改人" align="center" >
      </el-table-column>
      <el-table-column prop="updateTime" label="修改时间" align="center" >
      </el-table-column>
      <!--<el-table-column label="操作" align="center" v-if="level==1">-->
        <!--<template slot-scope="scope">-->
          <!--<el-button size="mini" type="primary" @click="orderDetail(scope.row.id)">分期详情</el-button>-->
          <!--<el-button size="mini" type="danger" @click="handleDelete(scope.row.id)">删除</el-button>-->
        <!--</template>-->
      <!--</el-table-column>-->
    </el-table>


    <el-dialog title="删除管理员" :visible.sync="delVisible" width="300px" center>
      <div align="center">删除不可恢复，是否确定删除？</div>
      <span slot="footer">
                <el-button size="mini" @click="delVisible = false">取消</el-button>
                <el-button size="mini" @click="deleteRow" type="primary">确定</el-button>
            </span>
    </el-dialog>
  </div>
</template>

<script>
  import {getAllOrder,delOrder,getOrderStage} from '../../api/public/api';
  import {mixin} from '../../../static/js/index';

  export default {
    mixins: [mixin],
    data() {
      return {
        level: 0,
        orderList: [],
        id: "",
        delVisible: false,          //删除弹窗是否显示



      }
    },


    mounted() {
      let id=this.$route.query.id
      console.log(this.$route.query.id,"this.$route.query.id")
      let data = {
        id:id
      }
      this.getData(id);
      this.level = localStorage.getItem('level')
    },
    methods: {
      updateData() {
        let data = {}
        this.getData(data);
      },
      //查询订单详情
      getData(data) {
        getOrderStage(data).then(res => {
          console.log(res.data.data)
          if (res.data.code == 0) {
            res.data.data.map(item => {
              const t = new Date(item.createTime)
              const y = t.getFullYear()
              const m = t.getMonth() + 1
              const d = t.getDate()
              item.createTime = y + "-" + m + "-" + d
            })
            this.orderList = res.data.data
            console.log(this.orderList)
          }


        })
      },

      //删除一条订单
      handleDelete(id) {
        this.id = id
        this.delVisible = true

      },
      deleteRow() {

        delOrder(this.id)
          .then(res => {
            if (res.data.code == 0) {
              this.delVisible = false;
              this.updateData()
              this.notify("删除成功", "success");
            } else {
              this.notify("删除失败", "error");
            }
          })
          .catch(err => {
            console.log(err);
          });

      },
      //查看订单详情
      orderDetail(id){
        this.$router.push({
          path:"/orderDetail",
          query:{
            id:id
          }
        });
      }
    }
  }
</script>

<style scoped>
  .handle-box {
    margin-bottom: 20px;
  }

  .consumer-img {
    width: 100%;
    height: 80px;
    border-radius: 5px;
    margin-bottom: 5px;
    overflow: hidden;
  }

  .handle-input {
    width: 300px;
    display: inline-block;
  }

  .pagination {
    display: flex;
    justify-content: center;
  }
</style>
